<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS网格Grid布局入门</title>
    <style>
        .note {
            text-align: center;
            margin: 30px auto;
        }
        .note a {
            line-height: 40px;
        }
        .note span {
            line-height: 50px;
        }

        .wrapper {
            width: 900px;
            height: 900px;
            border: 1px solid black;
            margin: 0 auto;
            background-color: lightgrey;
            display: grid;
            grid-template-columns: 2fr 1fr 2fr;
            grid-template-rows: 100px 100px 100px 100px 100px 100px;
            /*有多少个像素值就表示有多少列/行，值本身表示行高/列宽*/

        }

        .wrapper div {
            border-bottom: 3px solid white;
        }

        .wrapper div:nth-child(1) {
            /* grid-row: 1; */
            grid-column: 1 / 3; /*等价于这两条语句 grid-column-start:1 和 grid-column-end:4*/
            text-align: center;
            background-color: aqua;
        }

        .wrapper div:nth-child(2) {
            text-align: center;
            background-color: bisque;
        }

        .wrapper div:nth-child(3) {
            grid-row: 2 / 4;
            text-align: center;
            background-color: aquamarine;
        }

        .wrapper div:nth-child(4) {
            grid-column: 2 / 4;
            grid-tra
            text-align: center;
            background-color: pink;
        }

        .wrapper div:nth-child(5) {
            text-align: center;
            background-color: rgb(127, 161, 255);
        }

        .wrapper div:nth-child(6) {
            text-align: center;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class='note'>
        <span >按顺序阅读下列三篇文章 可基本掌握grid布局</span><br>
        <a href="https://www.css88.com/archives/8506">《5分钟学会 CSS Grid 布局》</a><br>
        <a href="http://www.css88.com/archives/8510" rel="noopener" target="_blank">CSS Grid 布局完全指南(图解 Grid 详细教程)</a><br>
        <a href="http://www.css88.com/archives/8512" target="_blank">如何使用 CSS Grid 快速而又灵活的布局</a>
        
    </div>
    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>